<template>
  <ph-view>
    <ph-blockquote type="primary">
      ph-page,作为页面组成的顶级组件，
      该组件可以自定义很多全局css变量，具体以style的形式修改 例如:<br />
      --ph-aside-width:200px; 侧边导航栏的宽度自定义<br />
      --ph-topbar-height:60px; 顶部导航栏的高度自定义<br />
      --ph-theme:var(--ph-danger) 全局的主题色，默认蓝色#3063d0 //谨慎修改;
    </ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本layout （上下【左右】）">
        <ph-flex class="page-zone">
          <ph-page>
            <ph-header style="background-color: var(--ph-primary)">
              <h1 style="position: relative; z-index: 2">header</h1>
            </ph-header>
            <ph-layout>
              <ph-aside>sider</ph-aside>
              <ph-main>main</ph-main>
            </ph-layout>
          </ph-page>
        </ph-flex>
        <ph-pretty lang="html">{{ layout1 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="layout1">
        <ph-flex class="page-zone">
          <ph-page dir="row">
            <ph-aside>sider</ph-aside>
            <ph-layout dir="col">
              <ph-header style="background-color: var(--ph-danger)">
                <h1>header</h1>
              </ph-header>
              <ph-main>main</ph-main>
            </ph-layout>
          </ph-page>
        </ph-flex>
        <ph-pretty lang="html">{{ layout2 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="layout-flex1">
        <ph-flex class="page-zone">
          <ph-page>
            <ph-header style="background-color: var(--ph-danger)">
              <h1>header</h1>
            </ph-header>
            <ph-layout dir="row">
              <ph-aside>sider</ph-aside>
              <ph-flex height="100%" dir="col">
                <ph-flex bg="var(--ph-primary)">1</ph-flex>
                <ph-flex bg="var(--ph-success)">2</ph-flex>
                <ph-flex bg="var(--ph-danger)">3</ph-flex>
                <ph-flex bg="var(--ph-warning)">4</ph-flex>
                <ph-flex bg="var(--ph-golden)">5</ph-flex>
              </ph-flex>
            </ph-layout>
          </ph-page>
        </ph-flex>
        <ph-pretty lang="html">{{ flex1 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="layout-flex2">
        <ph-flex class="page-zone">
          <ph-page>
            <ph-header style="background-color: var(--ph-danger)">
              <h1>header</h1>
            </ph-header>
            <ph-layout dir="row">
              <ph-aside>sider</ph-aside>
              <ph-flex height="100%" dir="col">
                <ph-flex flex="0 0 10%" bg="var(--ph-primary)">1</ph-flex>
                <ph-flex flex="0 0 20%" bg="var(--ph-success)">2</ph-flex>
                <ph-flex flex="0 0 30%" bg="var(--ph-danger)">3</ph-flex>
                <ph-flex flex="0 0 40%" bg="var(--ph-warning)">4</ph-flex>
                <ph-flex flex="0 0 50%" bg="var(--ph-golden)">5</ph-flex>
              </ph-flex>
            </ph-layout>
          </ph-page>
        </ph-flex>
        <ph-pretty lang="html">{{ flex2 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="layout-flex3">
        <ph-flex class="page-zone">
          <ph-page>
            <ph-header style="background-color: var(--ph-danger)">
              <h1>header</h1>
            </ph-header>
            <ph-layout dir="row">
              <ph-aside>sider</ph-aside>
              <ph-flex height="100%" dir="col">
                <ph-flex bg="var(--ph-primary)">1</ph-flex>
                <ph-flex>
                  <ph-flex height="100%" bg="var(--ph-danger)">2</ph-flex>
                  <ph-flex height="100%" bg="var(--ph-success)">2</ph-flex>
                  <ph-flex height="100%" bg="var(--ph-danger)">3</ph-flex>
                  <ph-flex height="100%" bg="var(--ph-warning)">4</ph-flex>
                </ph-flex>
                <ph-flex bg="var(--ph-golden)">5</ph-flex>
              </ph-flex>
            </ph-layout>
          </ph-page>
        </ph-flex>
        <ph-pretty lang="html">{{ flex3 }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  PhBlockquote,
  PhView,
  PhPage,
  PhHeader,
  PhLayout,
  PhMain,
  PhAside,
  PhFlex,
  PhTab,
  PhTabPanel,
} from "@/index";
import * as Data from "../data/layout";
export default defineComponent({
  components: {
    PhBlockquote,
    PhView,
    PhPage,
    PhLayout,
    PhHeader,
    PhAside,
    PhMain,
    PhFlex,
    PhTab,
    PhTabPanel,
  },
  setup() {
    return {
      ...Data,
    };
  },
});
</script>
<style lang="scss" scoped>
.page-zone {
  position: relative;
  width: 100%;
  height: 30rem;
  flex: 0 0 auto;
}
</style>
